<template>
  <!-- 离职基本信息页面 -->
  <div class="page">
    <!-- 搜索页面 -->
    <el-form
      ref="leaveInfoSearch"
      :model="leaveInfoSearch"
      size="small"
      :inline="true"
      class="query-form"
    >
      <el-form-item>
        <el-input
          size="small"
          autocomplete="off"
          v-model="leaveInfoSearch.name"
          placeholder="姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          size="small"
          autocomplete="off"
          v-model="leaveInfoSearch.phone"
          placeholder="电话"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="leaveInfoSearch.officeId" placeholder="部门">
          <el-option
            v-for="item in optionsOffice"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="leaveInfoSearch.postName" placeholder="岗位">
          <el-option
            v-for="item in optionsJobs"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button size="small" type="primary" @click="searchLeave()"
          >查询</el-button
        >
        <el-button
          size="small"
          style="margin-left: 10px"
          @click="resetsearchUsers()"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 内容页面 -->
    <div class="bg-white top">
      <!-- 离职基本信息 -->
      <el-table
        :data="leaveInfoTable"
        height="calc(100% - 80px)"
        size="small"
        ref="leaveInfo"
        :cell-style="cellStyle"
        style="border: 1px solid #d6cfe2"
        :header-cell-class-name="cellHeadStyle"
        :row-class-name="tableRowClassName"
        v-loading="loading"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="id"
        class="table"
      >
        <el-table-column
          prop="applyuser.name"
          label="姓名"
          align="center"
          width="100"
          fixed="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="applyuser.sex"
          align="center"
          label="性别"
          width="60"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
                {{ $dictUtils.getDictLabel("sex", scope.row.applyuser.sex, '-') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="applyuser.phone"
          label="电话"
          width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="company.name"
          label="公司"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="depart.name"
          label="部门"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="applyuser.post.name"
          label="岗位"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="applydate"
          label="申请时间"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="incomedate"
          label="入职日期"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="quitdate"
          label="离职日期"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="reson"
          label="离职原因"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="acceptuser.name"
          label="交接人员"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="undelthings"
          min-width="140"
          label="未处理事宜"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="leaveHandleSize"
        @current-change="leaveHandleCurrent"
        :current-page.sync="leaveInfoPageNo"
        :page-size="leaveInfoPageSize"
        layout="total, prev, pager, next, jumper"
        :total="leaveInfoTotal"
        style="margin: 1rem 0"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import tableStyles from "../../../../utils/mixins.js";
import { colorSpan } from "../../sys/dashboard/echarts/default.js";
export default {
  mixins: [tableStyles],
  data() {
    return {
      // 公司ID
      companyId: "",
      //部门下拉选
      optionsOffice: [],
      //岗位下拉选
      optionsJobs: [],
      //顶部搜索
      leaveInfoSearch: {
        name: "",
        phone: "",
        officeId: "",
        postName: "",
      },
      //离职信息表格
      leaveInfoTable: [],
      loading: null,
      //批量删除
      checkLeaveNum: [],
      // 分页
      leaveInfoPageNo: 1,
      leaveInfoPageSize: 10,
      leaveInfoTotal: 0,
    };
  },
  //接收ID参数
  created() {
    this.companyId = this.$route.query.id;
  },
  mounted() {
    this.getSelectUserLeave();
    this.getSelectLeaveOffice();
    this.getSelectLeaveJobs();
  },
  methods: {
    // 查询所有离职
    getSelectUserLeave() {
      this.loading = true;
      this.$http({
        url: "/sys/web/userinfo/findLeaving",
        method: "get",
        params: {
          pageNo: this.leaveInfoPageNo,
          pageSize: this.leaveInfoPageSize,
          companyId: this.companyId,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.leaveInfoTable = data.leavingList;
          this.leaveInfoTotal = data.totalCount;
        }
        this.loading = false;
      });
    },
    // 查询部门下拉选
    getSelectLeaveOffice() {
      this.$http({
        url: "/sys/person/findOffice",
        method: "get",
        params: {
          companyId: this.companyId,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.optionsOffice = data.children;
        }
      });
    },
    // 查询岗位下拉选
    getSelectLeaveJobs() {
      this.$http({
        url: "/sys/person/findPostName",
        method: "get",
      }).then(({ data }) => {
        if (data && data.success) {
          this.optionsJobs = data.postList;
        }
      });
    },
    //搜索条件的离职
    searchLeave() {
      this.loading = true;
      this.$http({
        url: "/sys/web/userinfo/searchLeaving",
        method: "get",
        params: {
          pageNo: this.leaveInfoPageNo,
          pageSize: this.leaveInfoPageSize,
          companyId: this.companyId,
          ...this.leaveInfoSearch,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.leaveInfoTable = data.list;
          this.leaveInfoTotal = data.totalCount;
          this.loading = false;
        } else {
          this.leaveInfoTable = [];
          this.leaveInfoTotal = 0;
          this.loading = false;
        }
      });
    },
    //重置搜索
    resetsearchUsers() {
      (this.leaveInfoSearch = {
        name: "",
        phone: "",
        officeId: "",
        postName: "",
      }),
        this.getSelectUserLeave();
    },
    //离职信息分页
    leaveHandleSize(val) {
      this.leaveInfoPageSize = val;
      this.leaveInfoPageNo = 1;
      this.getSelectUserLeave();
    },
    leaveHandleCurrent(val) {
      this.leaveInfoPageNo = val;
      this.getSelectUserLeave();
    },
  },
};
</script>